import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { AiFormFieldApi } from '#/api/ai/form/formField';
import type { DescriptionItemSchema } from '#/components/description';

import { h } from 'vue';

import { HTML_TYPE, JAVA_TYPE } from '@vben/constants';
/** 新增/修改的表单 */
export function useFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'id',
      component: 'Input',
      dependencies: {
        triggerFields: [''],
        show: () => false,
      },
    },
    {
      fieldName: 'name',
      label: '变量名',
      rules: 'required',
      component: 'Input',
      componentProps: {
        placeholder: '请输入变量名',
      },
    },
    {
      fieldName: 'displayName',
      label: '显示名称',
      component: 'Input',
      componentProps: {
        placeholder: '请输入显示名称',
      },
    },
    {
      fieldName: 'javaType',
      label: '字段类型',
      component: 'Select',
      componentProps: {
        options: JAVA_TYPE,
        placeholder: '请选择字段类型',
      },
    },
    {
      fieldName: 'htmlType',
      label: '表单类型',
      rules: 'required',
      component: 'Select',
      componentProps: {
        options: HTML_TYPE,
        placeholder: '请选择表单类型',
      },
    },
    {
      fieldName: 'dataType',
      label: '数据类型',
      component: 'Select',
      componentProps: {
        options: [],
        placeholder: '请选择数据类型',
      },
    },
    {
      fieldName: 'defaultValue',
      label: '默认值',
      component: 'Textarea',
      formItemClass: 'col-span-2',
      componentProps: {
        placeholder: '请输入默认值',
      },
    },
    {
      fieldName: 'description',
      label: '变量填写说明',
      component: 'RichTextarea',
    },
    {
      fieldName: 'required',
      label: '是否必填',
      component: 'InputNumber',
      componentProps: {
        min: 0,
        placeholder: '请输入是否必填',
      },
    },
    {
      fieldName: 'validationRules',
      label: '验证规则',
      component: 'Textarea',
      formItemClass: 'col-span-2',
      componentProps: {
        placeholder: '请输入验证规则',
      },
    },
    {
      fieldName: 'sort',
      label: '排序',
      component: 'InputNumber',
      componentProps: {
        min: 0,
        placeholder: '请输入排序',
      },
    },
    {
      fieldName: 'metadata',
      label: '其他参数',
      component: 'Textarea',
      formItemClass: 'col-span-2',
      componentProps: {
        placeholder: '请输入其他参数',
      },
    },
    {
      fieldName: 'parentId',
      label: '上级变量id',
      component: 'InputNumber',
      componentProps: {
        min: 0,
        placeholder: '请输入上级变量id',
      },
    },
    {
      fieldName: 'displayFlag',
      label: '是否显示',
      component: 'RadioGroup',
      componentProps: {
        options: [],
        buttonStyle: 'solid',
        optionType: 'button',
      },
    },
    {
      fieldName: 'disabled',
      label: '是否可编辑',
      component: 'InputNumber',
      componentProps: {
        min: 0,
        placeholder: '请输入是否可编辑',
      },
    },
    {
      fieldName: 'example',
      label: '示例',
      component: 'Textarea',
      formItemClass: 'col-span-2',
      componentProps: {
        placeholder: '请输入示例',
      },
    },
    {
      fieldName: 'classify',
      label: '分类',
      component: 'Input',
      componentProps: {
        placeholder: '请输入分类',
      },
    },
  ];
}

/** 详情页字段 */
export function useDetailSchema(): DescriptionItemSchema[] {
  return [
    {
      label: '变量名',
      field: 'name',
    },
    {
      label: '显示名称',
      field: 'displayName',
    },
    {
      label: '字段类型',
      field: 'javaTypeName',
    },
    {
      label: '表单类型',
      field: 'htmlTypeName',
    },
    {
      label: '数据类型',
      field: 'dataTypeName',
    },
    {
      label: '默认值',
      field: 'defaultValue',
      content: (data) =>
        h('div', {
          innerHTML: data?.defaultValue,
          class: 'whitespace-pre-wrap text-sm leading-relaxed',
        }),
    },
    {
      label: '变量填写说明',
      field: 'description',
      content: (data) => h('div', { innerHTML: data?.description }),
    },
    {
      label: '是否必填',
      field: 'required',
    },
    {
      label: '验证规则',
      field: 'validationRules',
      content: (data) =>
        h('div', {
          innerHTML: data?.validationRules,
          class: 'whitespace-pre-wrap text-sm leading-relaxed',
        }),
    },
    {
      label: '排序',
      field: 'sort',
    },
    {
      label: '其他参数',
      field: 'metadata',
      content: (data) =>
        h('div', {
          innerHTML: data?.metadata,
          class: 'whitespace-pre-wrap text-sm leading-relaxed',
        }),
    },
    {
      label: '上级变量id',
      field: 'parentId',
    },
    {
      label: '是否显示',
      field: 'displayFlagName',
    },
    {
      label: '是否可编辑',
      field: 'disabled',
    },
    {
      label: '示例',
      field: 'example',
      content: (data) =>
        h('div', {
          innerHTML: data?.example,
          class: 'whitespace-pre-wrap text-sm leading-relaxed',
        }),
    },
    {
      label: '分类',
      field: 'classify',
    },
  ];
}

/** 列表的搜索表单 */
export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'name',
      label: '变量名',
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '请输入变量名',
      },
    },
    {
      fieldName: 'displayName',
      label: '显示名称',
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '请输入显示名称',
      },
    },
    {
      fieldName: 'parentId',
      label: '上级变量id',
      component: 'InputNumber',
      componentProps: {
        min: 0,
        placeholder: '请输入上级变量id',
      },
    },
    {
      fieldName: 'displayFlag',
      label: '是否显示',
      component: 'Select',
      componentProps: {
        allowClear: true,
        options: [],
        placeholder: '请选择是否显示',
      },
    },
    {
      fieldName: 'disabled',
      label: '是否可编辑',
      component: 'InputNumber',
      componentProps: {
        min: 0,
        placeholder: '请输入是否可编辑',
      },
    },
    {
      fieldName: 'example',
      label: '示例',
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '请输入示例',
      },
    },
    {
      fieldName: 'classify',
      label: '分类',
      component: 'Input',
      componentProps: {
        allowClear: true,
        placeholder: '请输入分类',
      },
    },
  ];
}

/** 列表的字段 */
export function useGridColumns(): VxeTableGridOptions<AiFormFieldApi.FormField>['columns'] {
  return [
    { type: 'checkbox', width: 40 },
    {
      field: 'id',
      title: '表单变量id',
      minWidth: 120,
      visible: false,
    },
    {
      field: 'name',
      title: '变量名',
      minWidth: 120,
    },
    {
      field: 'displayName',
      title: '显示名称',
      minWidth: 120,
    },
    {
      field: 'javaType',
      title: '字段类型',
      minWidth: 120,
    },
    {
      field: 'htmlType',
      title: '表单类型',
      minWidth: 120,
    },
    {
      field: 'dataType',
      title: '数据类型',
      minWidth: 120,
    },
    {
      field: 'defaultValue',
      title: '默认值',
      minWidth: 120,
    },
    {
      field: 'description',
      title: '变量填写说明',
      minWidth: 120,
    },
    {
      field: 'required',
      title: '是否必填',
      minWidth: 120,
    },
    {
      field: 'validationRules',
      title: '验证规则',
      minWidth: 120,
    },
    {
      field: 'sort',
      title: '排序',
      minWidth: 120,
    },
    {
      field: 'metadata',
      title: '其他参数',
      minWidth: 120,
    },
    {
      field: 'createTime',
      title: '创建时间',
      minWidth: 120,
    },
    {
      field: 'parentId',
      title: '上级变量id',
      minWidth: 120,
    },
    {
      field: 'displayFlag',
      title: '是否显示',
      minWidth: 120,
    },
    {
      field: 'disabled',
      title: '是否可编辑',
      minWidth: 120,
    },
    {
      field: 'example',
      title: '示例',
      minWidth: 120,
    },
    {
      field: 'classify',
      title: '分类',
      minWidth: 120,
    },
    {
      field: 'actions',
      title: '操作',
      width: 200,
      fixed: 'right',
      slots: { default: 'actions' },
    },
  ];
}
